<template>
  <div class="errorpage" ref="bgstar" id="bgstar" @click="gotowhere('app')">
    <!-- <h2>404 -- NotFound</h2> -->
    <img :src="pic" alt="" class="myimg" />

    <!-- <div class="down">剩余{{num}}秒</div> -->
    <div class="dao" @click="gotowhere('app')">
      <van-circle
        v-model="currentRate"
        :rate="100"
        :text="bntext"
        :stroke-width="50"
        :size="70"
        :speed="20"
      />
    </div>
    <span class="spandot" v-for="(l, i) in spanNum" :key="i" :style="l"></span>
  </div>
</template>

<script>
import pic from "@/assets/images/503.png";


export default {
  name: "notfound",
  data() {
    return {
      pic,
      spanNum: [],
      // 当前进度
      currentRate:0
    };
  },
  methods: {
    // 星星初始化
    spanListInit() {
      var width = document.querySelector("#bgstar").clientWidth;
      var height = document.querySelector("#bgstar").clientHeight;
      // console.log(width,height);
      for (let i = 0; i < 520; i++) {
        var left = Math.random() * width;
        var top = Math.random() * height;

        var scale = Math.random;
        var rate = 2.5 * Math.random();
        var r = Math.random() * 255;
        var g = Math.random() * 255;
        var b = Math.random() * 255;
        var opacity = Math.random();

        this.spanNum.push({
          left: left + "px",
          top: top + "px",
          background: `rgba(${r},${g},${b},${opacity})`,
          transform: `scale(${scale})`,
          animationDelay: rate + "s",
        });
      }
    },
  },
  mounted() {
    this.spanListInit();
  },
  destroyed() {
    // this.currentRate = 0
  },
  computed:{
    // 倒计时文字
    bntext(){
      return this.currentRate + '%'
    }
  },
  watch:{
    currentRate(v){
      // console.log(v);
      if(v==100){
        this.gotowhere('app')
      }
    }
  }
};
</script>

<style lang="scss" scoped >
// scope 独立的css作用域
.errorpage {
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  .down {
    position: absolute;
    left: 20px;
    top: 20px;
    border: 1px solid #fff;
    color: #fff;
    width: 70px;
    height: 30px;
    border-radius: 10px;
    text-align: center;
    line-height: 30px;
  }
  .dao {
    position: absolute;
    top: 20px;
    right: 20px;
    ::v-deep .van-circle__text {
      color: #fff !important;
    }
  }
  .myimg {
    width: 270px;
    height: 270px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
  }
  .spandot {
    position: absolute;
    z-index: 100;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;
  }
  @keyframes flash {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.5;
    }
  }
}
</style>